<template>
  <div id="rightUp2">
    <div class="centerTitle">
      <div class="asTitle">天翼云</div>
    </div>
    <div class="secondTitle">
      <div class="frist ml-3 h-24 colorBlue fw-b fs-xxxxl">vCpu使用率</div>
      <div class="second"></div>
    </div>
    <div class="up">
      <dv-active-ring-chart :config="config" class="pie" />
      
    </div>
    <div class="secondTitle">
      <div class="frist ml-3 h-24 colorBlue fw-b fs-xxxxl">重点产品发展</div>
      <div class="second ml-3 h-24 colorBlue fw-b fs-xxxxl"></div>
    </div>
  <div class="up"><dv-conical-column-chart :config="config1" class="bar" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [
          {
            name: "V",
            value: 55,
          },
          {
            name: "X",
            value: 120,
          },
          {
            name: "Y",
            value: 78,
          },
          {
            name: "Z",
            value: 66,
          },
        ],
        digitalFlopStyle: {
          fontSize: 20,
          fill: "#fff",
        },
      },
      config1: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 71,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 35,
          },
          {
            name: "漯河",
            value: 15,
          },
        ],
        showValue: true,
      },
    };
  },
  components: {
    // CenterChart,
  },
};
</script>

<style lang="scss" scoped>
#rightUp2 {
  display: flex;
  height: 95%;
  flex-direction: column;
  .centerTitle {
    flex: 2.4;
    padding: 0.15vh 0.15vw;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    .asTitle {
      padding-left: 2vw;
      padding-top: 2vh;
      // 使用相对位置让问题垂直居中
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .secondTitle {
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 1vw;
    .frist {
      flex: 1;
    }
    .second {
      flex: 1;
    }
  }
  .up {
    flex: 4;
    width: 95%;
    margin: 0.3vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .bar {
      flex: 1;
      height: 13vh;
      width: 6vw;
    }
    .pie {
      flex: 1;
      height: 13vh;
      width: 6vw;
    }
  }
}
</style>
